import { Layout } from "@/components/layout/layout";
import ProfileLayout from "@/components/layout/profileLayout";
import { showToast } from "@/components/toast";
import { useHttp } from "@/hooks";
import { Button, Input } from "@nextui-org/react";
import type { NextPage } from "next";
import Link from "next/link";
import { useState, KeyboardEvent } from "react";

const PasswordForgotPage: NextPage = () => {
  const [email, setEmail] = useState("");
  const { isLoading, http } = useHttp();
  const handleKeyUp = (e: KeyboardEvent) => {
    e.preventDefault();
    if (e.code === "Enter") {
      handleSubmit();
    }
  };

  const handleSubmit = async () => {
    if (!email) {
      showToast("Please enter your email");
      return;
    }
    const re = /@(\w+)(\.\w+)+$/;
    if (!re.test(email)) {
      showToast("Please enter a valid email");
      return;
    }

    const res = await http.post("/api/user/password/email", { email });
    // console.log("🚀 ~ handleSubmit ~ res:", res);
  };

  return (
    <ProfileLayout>
      <div className="passwrod-reset-content  w-[500px] mx-auto">
        <h1 className="text-center my-6 font-[30px]">Password Reset</h1>
        <div className="reset-form">
          <form onSubmit={(e) => e.preventDefault()}>
            <Input
              fullWidth
              color="default"
              isClearable={false}
              variant="bordered"
              radius="lg"
              size="md"
              type="email"
              isRequired
              label="Email"
              className="mb-4"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              onKeyUp={handleKeyUp}
              // contentLeft={<Mail fill="currentColor" />}
            />

            <div className="actions text-center mt-6">
              <Button
                color="primary"
                isLoading={isLoading}
                className="w-full"
                size="lg"
                onClick={handleSubmit}
              >
                Send Email
              </Button>
            </div>
          </form>
        </div>
      </div>
    </ProfileLayout>
  );
};

export default PasswordForgotPage;
